<template>
    <div id="app">
        <div class="banner">
            <div class="nav-bar" :class="{ fixed: isFixed }">
              <!-- 这是导航条里的每一个tab，给它动态绑定active类，高亮才显示，并且绑定了点击事件 -->
  <div
     v-for="(item, index) in contentList"
     :key="index"
     class="nav-bar-item"
     :class="{ active: currentNav == index }"
     @click="toBox(index)"
  >
     <span class="nav-text">{{ item }}</span>
  </div>
            </div>
        </div>
            <!-- 这是其中的一块内容 -->
    <div class="scene j-content">
      <h3 class="production-title">应用场景</h3>
      <!-- 其他内容 -->
      <div style="width: 100%;height: 800px;">Content for Section 1</div>
    </div>
    <div class="scene j-content">
      <h3 class="production-title">section2</h3>
      <!-- 其他内容 -->
      <div style="width: 100%;height: 800px;">Content for Section 2</div>
    </div>
    <div class="scene j-content">
      <h3 class="production-title">section3</h3>
      <!-- 其他内容 -->
      <div style="width: 100%;height: 800px;">Content for Section 3</div>
    </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            contentList:['section1','section2','section3'],
// 是否固定
      isFixed: false,
      // 当前选择的tab
      currentNav: 0,
        }
    },
        mounted() {
    window.addEventListener('scroll', this.handleScroll) // 监听滑动事件
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll) // 销毁监听滑动事件
  },
  methods:{
    // 处理滚动
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // console.log(scrollTop) // 滑动的长度
      var offsetTop = document.querySelector('.banner').offsetHeight
      console.log(JSON.stringify(offsetTop));
      // 判断是否已经记录了每个内容的top，如果不是，就记录一下。如果是，就直接使用
      // 获取所有锚点元素
      const divs = [...document.querySelectorAll('.j-content')]
      // 将所有锚点元素offsetTop push到数组内
      divs.forEach((item, index) => {
        this.contentTopList[index] = item.offsetTop - 25
      })
      // if (this.contentTopList.length === 0) {

      // }
      // 判断当前是否是点击定位的，如果不是，才有滚动定位的效果
      if (!this.isClick) {
        let navIndex
        // 滚动定位tab高亮的状态
        for (let i = 0; i < this.contentTopList.length; i++) {
          // 如果当前滚动的top坐标大于第i个的top坐标，就记录下i。记录到最后，i就会是最后一个满足条件的i，也就是刚刚好的那个值
          if (scrollTop >= this.contentTopList[i]) {
            navIndex = i
          }
        }
        // 把下标赋值给 vue 的 data
        this.currentNav = navIndex
        if (typeof navIndex !== 'number') {
          this.currentNav = 0
        }
      }
      // 吸顶效果
      if (scrollTop > offsetTop) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
    // 滚动到哪一块
    toBox(index) {
      // 点击滚动到指定的位置，要去掉滚动的过程中因为位置变化带来的效果
      this.isClick = true
      this.currentNav = index
      const DOM = document.querySelectorAll('.j-content')[index]
      const offsetTop = DOM.offsetTop - 25
      // console.log('滚动到哪里', DOM)
      window.scrollTo({
        top: offsetTop,
        behavior: 'smooth'
      })
      // 过一段时间，把isClick还原
      setTimeout(() => {
        this.isClick = false
      }, 800)
    },
  }
        
};
</script>
<style lang="scss">
// .banner{
//     width:100%;
//     height: 61px;
// }
// 导航条
.nav-bar {
    display: flex;
    height: 61px;
    // background: url("/img/download/rect_bg.png") repeat-x;
    background-size: 5px 61px;
    &.fixed {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 10;
    }
    .nav-bar-item {
        position: relative;
        margin: 0 47px;
        line-height: 55px;
        cursor: pointer;
        &:hover::after,
        &.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background-color: #40c9c6
        }
        .nav-text {
            font-size: 16px;
            color: #333;
        }
    }
}
/* 导航栏样式 */
// #navbar {
//     position: fixed;
//     top: 0;
//     left: 0;
//     width: 100%;
//     background-color: #fff;
//     color: #333;
//     padding: 10px 0;
// }

/* 导航栏吸顶效果 */
// #navbar a {
//     position: sticky;
//     top: 0;
//     z-index: 1;
// }
</style>